<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <title>航班收藏添加</title>
    <!-- bootstrap样式，地图插件使用 -->
    <link href="../../css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <!-- 样式 -->
    <link href="../../css/style.css" rel="stylesheet"/>
    <!-- 主题（主要颜色设置） -->
    <link href="../../css/theme.css" rel="stylesheet"/>
    <!-- 通用的css -->
    <link href="../../css/common.css" rel="stylesheet"/>
</head>
<style>
    html::after {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        content: '';
        display: block;
        background-attachment: fixed;
        background-size: cover;
        background-position: center;
        z-index: -1;
    }

    #swiper {
        overflow: hidden;
        margin: 0 auto;
    }

    #swiper .layui-carousel-ind li {
        width: 20px;
        height: 10px;
        border-width: 0;
        border-style: solid;
        border-color: rgba(0, 0, 0, .3);
        border-radius: 6px;
        background-color: #f7f7f7;
        box-shadow: 0 0 6px rgba(255, 0, 0, .8);
    }

    #swiper .layui-carousel-ind li.layui-this {
        width: 30px;
        height: 10px;
        border-width: 0;
        border-style: solid;
        border-color: rgba(0, 0, 0, .3);
        border-radius: 6px;
    }

    button, button:focus {
        outline: none;
    }

    .data-add-container .add .layui-select-title .layui-unselect {
        padding: 0 12px;
        height: 40px;
        font-size: 15px;
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        text-align: center;
    }

    .data-add-container .add .layui-form-item {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .data-add-container .layui-form-pane .layui-form-item[pane] .layui-form-label {
        margin: 0;
        position: inherit;
        background: transparent;
        border: 0;
    }

    .data-add-container .add .layui-input-block {
        margin: 0;
        flex: 1;
    }

    .data-add-container .layui-form-pane .layui-form-item[pane] .layui-input-inline {
        margin: 0;
        flex: 1;
        display: flex;
    }
</style>
<body style="background: #fff; ">
<div id="app">
    <div :style='{"padding":"20px","margin":"30px auto","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"10px","borderWidth":"1px","borderStyle":"solid"}'
         class="data-add-container  sub_borderColor">

        <form class="layui-form layui-form-pane add" lay-filter="myForm">
            <!-- 级联表 航班 -->
            <!--<div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
                <label  :style='{"width":"auto","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
                    航班：
                </label>
                <div class="layui-input-block">
                    <select name="jipiaoId" id="jipiaoId" lay-filter="jipiaoId">
                        <option v-for="(item,index) in jipiaoList" v-bind:key="index" :value="item.id" :selected="detail.jipiaoId == item.id?true:false" :key="item.id">{{ item.jipiaoName }}</option>
                    </select>
                </div>
            </div>-->
            <!-- 级联表 用户 -->
            <!--<div class="layui-form-item main_borderColor" :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'>
                <label  :style='{"width":"auto","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}' class="layui-form-label">
                    用户：
                </label>
                <div class="layui-input-block">
                    <select name="yonghuId" id="yonghuId" lay-filter="yonghuId">
                        <option v-for="(item,index) in yonghuList" v-bind:key="index" :value="item.id" :selected="detail.yonghuId == item.id?true:false" :key="item.id">{{ item.yonghuName }}</option>
                    </select>
                </div>
            </div>-->
            <!-- 当前表的 -->
            <!-- 级联表的表id -->
            <input :value="detail.jipiaoId" id="jipiaoId" name="jipiaoId" type="hidden"/>
            <!-- 级联表的表id -->
            <input :value="detail.yonghuId" id="yonghuId" name="yonghuId" type="hidden"/>
            <div :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                 class="layui-form-item main_borderColor">
                <label :style='{"width":"auto","borderColor": "rgba(255, 255, 255, 0)","padding":"0 12px 0 0","backgroundColor":"rgba(255, 255, 255, 0)","fontSize":"15px","color":"#333","textAlign":"left"}'
                       class="layui-form-label">
                    类型：
                </label>
                <div class="layui-input-block">
                    <select :disabled="ro.jipiaoCollectionTypes" id="jipiaoCollectionTypes" lay-filter="jipiaoCollectionTypes"
                            name="jipiaoCollectionTypes">
                        <option :key="item.codeIndex" :selected="detail.jipiaoCollectionTypes == item.codeIndex?true:false"
                                :value="item.codeIndex"
                                v-bind:key="index"
                                v-for="(item,index) in jipiaoCollectionTypesList">{{ item.indexName }}
                        </option>
                    </select>
                </div>
            </div>
            <div :style='{"padding":"10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"0 0 10px 0","backgroundColor":"rgba(255, 255, 255, 0)","borderRadius":"1px","borderWidth":"0 0 1px 0","borderStyle":"solid"}'
                 class="layui-form-item main_borderColor">
                <div class="layui-input-block" style="text-align: right;">
                    <button :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.5)","margin":"0 10px","borderColor":"#ccc","backgroundColor":"rgba(75, 92, 196, 1)","color":"#fff","borderRadius":"8px","borderWidth":"0","width":"25%","fontSize":"14px","borderStyle":"solid","height":"44px"}'
                            class="layui-btn btn-submit" lay-filter="thisSubmit" lay-submit>提交
                    </button>
                </div>
            </div>

        </form>
    </div>
</div>

<script src="../../layui/layui.js"></script>
<script src="../../js/vue.js"></script>
<!-- 引入element组件库 -->
<script src="../../xznstatic/js/element.min.js"></script>
<!-- 引入element样式 -->
<link href="../../xznstatic/css/element.min.css" rel="stylesheet">
<!-- 组件配置信息 -->
<script src="../../js/config.js"></script>
<!-- 扩展插件配置信息 -->
<script src="../../modules/config.js"></script>
<!-- 工具方法 -->
<script src="../../js/utils.js"></script>
<!-- 校验格式工具类 -->
<script src="../../js/validate.js"></script>
<!-- 地图 -->
<script src="../../js/jquery.js" type="text/javascript"></script>
<script src="http://webapi.amap.com/maps?v=1.3&key=ca04cee7ac952691aa67a131e6f0cee0" type="text/javascript"></script>
<script src="../../js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../js/bootstrap.AMapPositionPicker.js" type="text/javascript"></script>

<script>
    var jquery = $;

    var vue = new Vue({
        el: '#app',
        data: {
            //项目路径
            baseUrl: "",
            dataList: [],
            ro: {
                jipiaoId: false,
                yonghuId: false,
                jipiaoCollectionTypes: false,
                insertTime: false,
                createTime: false,
            },
            detail: {
                jipiaoId: '',
                yonghuId: '',
                jipiaoCollectionTypes: '',//数字
                jipiaoCollectionValue: '',//数字对应的值
                insertTime: '',
                createTime: '',
            },
            jipiaoList: [],//级联表列表 航班
            jipiao: {},//级联表单个 航班
            yonghuList: [],//级联表列表 用户
            yonghu: {},//级联表单个 用户

            // 下拉框
            jipiaoCollectionTypesList: [],

            centerMenu: centerMenu
        },
        updated: function () {
            layui.form.render('select', 'myForm');
        },
        computed: {},
        methods: {
            jump(url) {
                jump(url)
            }
        }
    })


    layui.use(['layer', 'element', 'carousel', 'http', 'jquery', 'form', 'upload', 'laydate', 'tinymce'], function () {
        var layer = layui.layer;
        var element = layui.element;
        var carousel = layui.carousel;
        var http = layui.http;
        var jquery = layui.jquery;
        var form = layui.form;
        var upload = layui.upload;
        var laydate = layui.laydate;
        var tinymce = layui.tinymce;
        vue.baseUrl = http.baseurl

        localStorage.setItem("goUtl", "./pages/jipiaoCollection/list.html")

        //var jipiaoId = http.getParam('jipiaoId');
        let jipiaoId = localStorage.getItem("jipiaoId")
        if (jipiaoId != null && jipiaoId != "") {
            //单个 航班查询
            initializationJipiao(jipiaoId);
        }
        //列表 航班查询
        initializationJipiaoList();
        //var yonghuId = http.getParam('yonghuId');
        let yonghuId = localStorage.getItem("yonghuId")
        if (yonghuId != null && yonghuId != "") {
            //单个 用户查询
            initializationYonghu(yonghuId);
        }
        //列表 用户查询
        initializationYonghuList();
        // 下拉框
        // 类型的查询和初始化
        jipiaoCollectionTypesSelect();

        // 上传文件
        // 日期效验规则及格式
        dateTimePick();
        // 表单效验规则
        form.verify({
            // 正整数效验规则
            integer: [
                /^[1-9][0-9]*$/
                , '必须是正整数'
            ]
            // 小数效验规则
            , double: [
                /^[1-9][0-9]{0,5}(\.[0-9]{1,2})?$/
                , '最大整数位为6为,小数最大两位'
            ]
        });

        // session独取
        let table = localStorage.getItem("userTable");
        http.request(table + "/session", 'get', {}, function (data) {
            // 表单赋值
            //form.val("myForm", data.data);
            // data = data.data;
            for (var key in data) {
                vue.detail[table + "Id"] = data.id
            }
        });

        //修改
        if (http.getParam('jipiaoCollectionId')) {
            http.request(`jipiaoCollection/info/${http.getParam('jipiaoCollectionId')}`, 'get', {}, function (data) {
                vue.detail = data.data
            });
        }

        // 提交
        form.on('submit(thisSubmit)', function (data) {
            data = data.field;
            data["yonghuId"] = localStorage.getItem("userid");
            if (http.getParam('jipiaoCollectionId')) {
                data["id"] = http.getParam('jipiaoCollectionId')
            }
            // 提交数据
            http.requestJson(`jipiaoCollection/${http.getParam("jipiaoCollectionId") ? "update" : "add"}`, 'post', data, function (res) {
                if (res.code == 0) {
                    layer.msg('提交成功', {
                        time: 2000,
                        icon: 6
                    }, function () {
                        vue.jump("../jipiaoCollection/list.html");
                        http.remove('jipiaoCollectionId')
                        // back();
                    });
                } else {
                    layer.msg(res.msg, {time: 5000, icon: 5});
                }
            });
            return false
        });

    });

    // 日期框初始化
    function dateTimePick() {
        var myDate = new Date();  //获取当前时间
        /*
            ,change: function(value, date, endDate){
                value       得到日期生成的值，如：2017-08-18
                date        得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                endDate     得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
        */
    }


    // 类型的查询
    function jipiaoCollectionTypesSelect() {
        //填充下拉框选项
        layui.http.request("dictionary/page?page=1&limit=100&sort=&order=&dicCode=jipiao_collection_types", "GET", {}, (res) => {
            if (res.code == 0) {
                vue.jipiaoCollectionTypesList = res.data.list;
            }
        });
    }


    //单个 航班查询
    function initializationJipiao(id) {
        layui.http.request("jipiao/detail/" + id, 'get', {}, function (res) {
            if (res.code == 0) {
                vue.jipiao = res.data;
                vue.detail.jipiaoId = vue.jipiao.id//赋值给detail
            }
        });
    }

    //列表 航班查询
    function initializationJipiaoList() {
        layui.http.request("jipiao/page?page=1&limit=100&sort=&order=", 'get', {}, function (res) {
            if (res.code == 0) {
                vue.jipiaoList = res.data.list;
            }
        });
    }

    //单个 用户查询
    function initializationYonghu(id) {
        layui.http.request("yonghu/detail/" + id, 'get', {}, function (res) {
            if (res.code == 0) {
                vue.yonghu = res.data;
                vue.detail.yonghuId = vue.yonghu.id//赋值给detail
            }
        });
    }

    //列表 用户查询
    function initializationYonghuList() {
        layui.http.request("yonghu/page?page=1&limit=100&sort=&order=", 'get', {}, function (res) {
            if (res.code == 0) {
                vue.yonghuList = res.data.list;
            }
        });
    }
</script>
</body>
</html>
